<!doctype html>
<html>
   <meta charset="">
   <meta name="keyword" content="关键词，关键字">
   <meta name="Content" content="">
   <meta name="description" content="">
   <style>
      *{margin:0;padding:0;}
	  body{background:url(C:/Users/win7/Pictures/bg.jpg);background-size:cover;font-size:12px;font-family:"微软雅黑";}
	  /*S-box*/
	  .box{width:900px;height:510px;margin:200px auto;box-shadow:1px 1px 4px #0c0c0c;border-radius:3px 3px 3px 3px;}
	  /*S-b_top*/
	  .box .b_top{height:33px;background:#ddd;}

	  /*S-b_con*/
	  .box .b_con{height:434px;background:#353a3c;}
	  .box .b_con .b_con_vrcd{width:129px;height:434px;background:#666972;position:absolute;margin:-437px 771px;}
      .b_con_vrcd p:hover{box-shadow:1px 1px 4px #000;margin-top:1px;margin-bottom:2px;}
	  .b_cvl{height:20px;background:#fff;line-height:20px;cursor:pointer;border-bottom:1px solid #ddd;}

      /*s-b_bot*/
	  .box .b_bot{height:43px;background:#ddd;border-radius:0 0 3px 3px;}
	  
	  /*E-box*/
   </style>
<body>
    <!--S_box-->
    <div class="box">
	      <!--S_b_top-->
	      <div class="b_top">
		     
		  </div>
		  <!--E_b_top-->

		  <!--S_b_con-->
		  <div class="b_con">
		      <video id="ve" class="b_con_video" src="../mt/4.mp4" width="771px" height="434px"  controls="controls" ></video>
			  <div class="b_con_vrcd" >
			    <div class="b_cvl">
				<p id="pve1" onclick="pve1()">玉子市场4.mp4</p>
				</div>
			    <div class="b_cvl">
				<p id="pve2" onclick="pve2()"">玉子市场5.mp4</p>
				</div>
				<div class="b_cvl">
				<p id="pve3" onclick="pve3()">玉子市场6.mp4</p>
				</div>
				<div class="b_cvl">
				<p id="pve4" onclick="pve4()">玉子市场7.mp4</p>
				</div>
				<div class="b_cvl">
				<p id="pve5" onclick="pve5()">玉子市场8.mp4</p></div>
				<div class="b_cvl">
				<p id="pve6" onclick="pve6()">玉子市场9.mp4</p></div>
				<div class="b_cvl">
				<p id="pve7" onclick="pve7()">玉子市场10.mp4</p></div>
				<div class="b_cvl">
				<p id="pve8" onclick="pve8()">玉子市场11.mp4</p></div>
				<div class="b_cvl">
				<p id="pve9" onclick="pve9()">玉子市场12.mp4</p></div>
			  </div>
		  </div>
		  <!--E_b_con-->

		  <!--S_b_bot-->
		  <div class="b_bot">
		    <p id="on" onclick="load()" title="重新加载" style="width:20px;height:20px;float:left;background:url(../img/5.jpg) -362px -255px;margin:10px 14px;cursor:pointer;"></p>
			  
			<P id="left" onclick="left()" title="上一集"   style="width:20px;height:20px;float:left;background:url(../img/5.jpg) -410px -255px;position:absolute;margin:10px 380px;cursor:pointer;"></p>
			<P id="play" onclick="my()" title="开始" style="width:20px;height:20px;float:left;background:url(../img/5.jpg) -290px -255px;position:absolute;margin:10px 410px;cursor:pointer;"></p>
			<P id="right" onclick="right()" title="下一集"  style="width:20px;height:20px;float:left;background:url(../img/5.jpg) -386px -255px;position:absolute;margin:10px 440px;cursor:pointer;"></p>
			<P id="sound" onclick="sound()" title="静音" style="width:28px;height:24px;float:left;background:url(../img/sound2.png);position:absolute;margin:10px 736px;cursor:pointer;"></p>
			<p id="tshow" style="width:107px;height:22px;    position: absolute;margin: 9px 616px; font-size:14px; line-height:22px; text-align:center;color:#fff;">00:00:00</p>
		  </div>
		  <!--E_b_bot-->
		  
	</div>
	<!--E_box-->
 <script type="text/javascript">
   //判断
   var flag=false;
   var f_sound=false;
   //数组缓存数组
   var num=new 
   Array("../mt/4.mp4","../mt/5.mp4","../mt/6.mp4","../mt/7.mp4","../mt/8.mp4","../mt/9.mp4","../mt/10.mp4","../mt/11.mp4","../mt/12.mp4");
   
  
   var ve=document.getElementById('ve');
   var i=0;

   //上一集
   function left(){
      i=i-1; 
	  if(i==-1){
	    alert('已是第一集！');
		i=1;
	  }else
	   {
	     ve.src=num[i];
		 
	   }
   }
   //下一集
 
   function right(){
	  if(i==9){
	    alert('没有更多！');
	  }else{
		alert(i);
	    ve.src=num[i];
		i+=1;
	  }
   }

   //点击实现
   function pve2(){
     ve.src=num[1];
	 ve.autoplay="ture";
	 //flag=false;
   }
   function pve3(){
     ve.src=num[2];
	 ve.autoplay="ture";
	 //flag=false;
   }
   function pve4(){
     ve.src=num[3];
	 ve.autoplay="ture";
	 //flag=false;
   }
   function pve5(){
     ve.src=num[4];
	 ve.autoplay="ture";
	 //flag=false;
   }
   function pve6(){
     ve.src=num[5];
	 ve.autoplay="ture";
	 //flag=false;
   }
   function pve7(){
     ve.src=num[6];
	 ve.autoplay="ture";
	 //flag=false;
   }
   function pve8(){
     ve.src=num[7];
	 ve.autoplay="ture";
	 
   }
   function pve9(){
     ve.src=num[8];
	 ve.autoplay="ture";
	 
   }
    

   //重新加载键
   function load(){
      document.getElementById('ve').load();
	  document.getElementById('play').style.background='url(../img/5.jpg) -290px -255px';
	  flag=false;
   }
   //next键
   
   //播放键
   function my(){
	  if(!flag){
		document.getElementById('ve').play();
		document.getElementById('play').style.background='url(../img/5.jpg) -315px -255px';
		document.getElementById('play').title="暂停";
		//document.getElementById('bt1').value="stop";
		flag=true;
		
	  }else{
		flag=false;
	    document.getElementById('ve').pause();
		document.getElementById('play').style.background="url(../img/5.jpg) -290px -255px";
		document.getElementById('play').title="开始";
		//document.getElementById('bt1').value="play";
	  }   
   }
   //音量键
   function sound(){
     
	 if(!f_sound){
		 document.getElementById('sound').style.background="url(../img/sound.png)";
	   f_sound=true;
	   document.getElementById('sound').title="取消静音";
	 }else{
		 document.getElementById('sound').style.background="url(../img/sound2.png)";
	   f_sound=false;
	   document.getElementById('sound').title="静音";
	 }
   }
   
   document.getElementById('ve').addEventListener("timeupdate",function(){
     var texts=this.currentTime;
	 var s=parseInt(texts);
	 var m1=s/60;
	 var m1=parseInt(m1);
	 m1=townum(m1);
	 var s2=s%60;
	 s2=townum(s2);
	 var h1=s/3600;
	 h1=parseInt(h1);
	 h1=townum(h1);
	 document.getElementById('tshow').innerHTML=h1+":"+m1+":"+s2;

   });

    function townum(s){
     if(s<10) {return "0"+s;}
	 else {return s;}
   }

   document.getElementById('sound').addEventListener("click",function(){
	   
     document.getElementById('ve').muted;
   });


 </script>
</body>

</html>